<template>
    <!-- 分配还没做 -->
    <div class="app-container">
        <!-- 搜索 -->
        <el-row type="flex" justify="end" style="margin-bottom: 20px">
            <!-- 根据姓名搜索 -->
            <el-col :span="3" style="margin-right: 10px;">
                <el-input
                    v-model.trim="params.name"
                    placeholder="请输入姓名"
                    clearable
                    @clear="getHousemaster"
                ></el-input>
            </el-col>
            <!-- 根据生活区搜索 -->
            <el-col :span="3" style="margin-right: 10px;">
                <el-select v-model="params.livingId" placeholder="请选择">
                    <el-option
                        v-for="item in livingList"
                        :key="item.id"
                        :label="item.living"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-col>
            <!-- 搜索重置按钮 -->
            <el-button type="primary" @click="getHousemaster" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button type="primary" @click="addDialog = true;">添加</el-button>
        </el-row>
        <!-- 表格渲染 -->
        <el-table :data="tableData" stripe border v-loading="loading">
            <el-table-column type="selection" label="#"></el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="identityCard" label="员工号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别" :formatter="sfktFormate"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="email" label="邮件"></el-table-column>
            <el-table-column prop="living" label="负责生活区"></el-table-column>
            <el-table-column prop="building" label="负责楼栋"></el-table-column>
            <el-table-column prop="room" label="所属房间"></el-table-column>
            <!-- 操作按钮 -->
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="warning"
                        @click="handleDis(scope.$index, scope.row)"
                    >分配</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加对话框 -->
        <el-dialog :visible.sync="addDialog" @close="closeDialog">
            <el-form :model="DataForm" :rules="rules" ref="DataForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工号" :label-width="formLabelWidth" prop="identityCard">
                            <el-input v-model="DataForm.identityCard" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="DataForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                            <el-input v-model="DataForm.age" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                            <el-select v-model="DataForm.sex" placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="电话号" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="DataForm.phone" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                            <el-input v-model="DataForm.email" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(DataForm)">提交</el-button>
                            <el-button @click="resetForm(DataForm)">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog :visible.sync="editDialog" @close="closeDialog">
            <el-form :model="DataForm" :rules="rules" ref="DataForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工号" :label-width="formLabelWidth" prop="identityCard">
                            <el-input v-model="DataForm.identityCard" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="DataForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                            <el-input v-model="DataForm.age" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                            <el-select v-model="DataForm.sex" placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="电话号" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="DataForm.phone" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                            <el-input v-model="DataForm.email" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="editForm(DataForm)">提交</el-button>
                            <el-button @click="resetForm(DataForm)">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 分配对话框 -->
        <el-dialog :visible.sync="disDialog" @close="closeDialog">
            <el-form :model="DataForm" :rules="rules" ref="DataForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="负责生活区"
                            :label-width="disformLabelWidth"
                            prop="identityCard"
                        >
                            <el-select
                                v-model="disForm.livingId"
                                placeholder="请选择"
                                @change="changeBuilding"
                            >
                                <el-option
                                    v-for="item in livingList"
                                    :key="item.id"
                                    :label="item.living"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="负责楼栋"
                            :label-width="disformLabelWidth"
                            prop="identityCard"
                        >
                            <el-select
                                v-model="disForm.buildingId"
                                placeholder="请选择"
                                @change="changeRoom"
                            >
                                <el-option
                                    v-for="item in buildList"
                                    :key="item.id"
                                    :label="item.building"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item
                            label="房间号"
                            :label-width="disformLabelWidth"
                            prop="identityCard"
                        >
                            <el-select v-model="disForm.roomId" placeholder="请选择">
                                <el-option
                                    v-for="item in roomList"
                                    :key="item.id"
                                    :label="item.room"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="disSubForm()">提交</el-button>
                            <el-button @click="resetForm(DataForm)">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
import { getHousemaster, deleteHousemaster, addHousemaster, updateHousemaster, updateRoomHousemaster, saveRoomHousemaster } from '@/api/housemaster'
import { getLiving } from "@/api/living"
import { getBuilding } from "@/api/building"
import { getRoom } from "@/api/room"
export default {
    data() {
        return {
            tableData: [],
            // 加载框默认值
            loading: false,
            // 对话框默认值
            addDialog: false,
            editDialog: false,
            disDialog: false,
            // 表格总条数
            total: 0,
            params: {
                id: "",
                livingId: "",
                name: "",
                pageCurrent: 1,
                pageSize: 10,
            },
            // 表单数据
            // 性别选项
            options: [{
                value: 1,
                label: '女'
            }, {
                value: 0,
                label: '男'
            }],
            // label默认宽
            formLabelWidth: "70px",
            disformLabelWidth: "100px",
            DataForm: {
                address: "",
                age: null,
                email: "",
                identityCard: "",
                name: "",
                phone: "",
                sex: null,
                building: '',
                id: null,
                // 区域
            },
            // 生活区数据
            livingList: [],
            // 楼栋数据
            buildList: [],
            // 房间数据
            roomList: [],
            // 分配生活区表单数据
            disForm: {
                identityCard: "",
                living: "",
                livingId: "",
                building: "",
                buildingId: "",
                roomId: ""
            },
            // 表单验证规则
            rules: {
                identityCard: [
                    { required: true, message: '请输入员工号', trigger: 'blur' },
                    { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' }
                ],
                email: [
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                ],
                phone: [
                    { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: '请输入正确的手机号码'
                    },
                    { required: true, message: '请输入手机号', trigger: 'blur' },

                ],
            }
        }
    },
    created() {
        this.getHousemaster()
        this.getList()
    },
    methods: {
        // 获取区域数据
        async getList() {
            await getLiving(this.params).then((res) => {
                if (res.code === "200") {
                    this.livingList = res.data.records
                }
            })
        },
        // 获取楼栋信息building
        changeBuilding() {
            getBuilding({ livingId: this.disForm.livingId }).then((res) => {
                this.buildList = res.data.records
            })
        },
        changeRoom() {
            getRoom({ buildingId: this.disForm.buildingId }).then((res) => {
                this.roomList = res.data.records
            })
        },
        // 分页
        // 监听页码变化
        handleCurrentChange(newPage) {
            this.params.pageCurrent = newPage
            this.getHousemaster()
        },
        // 监听size变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize
            this.getHousemaster()
        },
        // 获取宿管信息
        async getHousemaster() {
            await getHousemaster(this.params).then((res) => {
                if (res.code === "200") {
                    this.loading = true
                    setTimeout(() => {
                        this.tableData = res.data.records
                        this.total = Number(res.data.total)
                        console.log('宿管信息管理');
                        console.log(res);
                        this.loading = false
                    }, 200);
                }
            }).catch((err) => { this.$message.error(err) })
        },
        // 删除功能
        async handleDelete(index, row) {
            const confirm = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err)
            if (confirm != 'confirm') {
                return this.$message.info("已取消删除")
            }
            // 确定删除
            deleteHousemaster(row.id).then((res) => {
                if (res.code !== "200") {
                    this.$message.error("删除失败")
                } else {
                    this.$message.success("删除成功")
                    this.getHousemaster();
                }
            })
        },
        // 打开编辑对话框
        handleEdit(index, row) {
            this.editDialog = true
            // 根据id获取
            this.DataForm = JSON.parse(JSON.stringify(row))
        },
        // 编辑确认提交
        editForm() {
            // 先做表单验证
            this.$refs.DataForm.validate(async valid => {
                if (valid) {
                    updateHousemaster(this.DataForm).then((res) => {
                        if (res.code === '200') {
                            this.editDialog = false
                            this.getHousemaster();
                            this.$message.success('修改成功')
                            this.DataForm = {}
                        } else {
                            this.$message.error('修改失败')
                            return false;
                        }
                    }).catch((error) => {
                        this.$message.error(error)
                    })
                }
            })
        },
        // 添加确认按钮
        submitForm() {
            // 先做表单验证
            this.$refs.DataForm.validate(async valid => {
                if (valid) {
                    // 发起请求
                    await addHousemaster(this.DataForm).then((res) => {
                        if (res.code === '200') {
                            // 关闭模态框
                            this.addDialog = false
                            this.getHousemaster();
                            this.$message.success('添加成功')
                            this.DataForm = {}
                        } else {
                            this.$message.error('添加失败')
                            return false;
                        }
                    }).catch((error) => {
                        this.$message.error(error)
                    })
                }
            })
        },
        // 打开分配对话框
        handleDis(index, row) {
            this.disDialog = true
            // 根据id获取
            console.log(row.identityCard);
            this.disForm.id = JSON.parse(JSON.stringify(row.id))
            // this.disForm.roomId = JSON.parse(JSON.stringify(row.roomId))
            this.disForm.id = JSON.parse(JSON.stringify(row.id))
        },
        // 分配对话框提交
        disSubForm() {
            console.log(this.disForm.id);
            updateRoomHousemaster({ buildingId: this.disForm.buildingId, id: this.disForm.id, roomId: this.disForm.roomId }).then((res) => {
                this.getHousemaster()
                this.disDialog = false
            })
        },


        // 重置添加,编辑对话框,数据,验证都清空
        resetForm() {
            this.DataForm = {}
            this.$refs.DataForm.resetFields();
        },
        // 关闭对话框清空表单
        closeDialog() {
            this.DataForm = {}
            this.$refs.DataForm.resetFields();
        },
        // 搜索重置
        reset() {
            this.params.livingId = "";
            this.params.name = "";
            getHousemaster(this.params).then((res) => {
                this.loading = true;
                setTimeout(() => {
                    this.tableData = res.data.records;
                    this.loading = false;
                }, 500);
            });
        },
        // 格式化性别
        sfktFormate(row, index) {
            if (row.sex == 0) {
                return "男";
            } else if (row.sex == 1) {
                return "女";
            }
        },
    },
}
</script>
<style lang="">
    
</style>